<template>
	<view class="pages-box">
		<view class="page-content padding20">
			<view class="title">
				<text class="txt">{{title}}</text>
			</view>
			<view class="ts-text">{{tips}}</view>
			<view class="form-box">
				<view class="line-item acea-row row-middle" v-if=" id !== 4 && id !== 5">
					<view class="left"><text class="redxx">*</text>{{'保险公司'}}</view>
					<view class="right input">
						<picker @change="changeGs" :value="gsindex" :range="gsList" range-key="name">
							<view class="text">{{gsList[gsindex].name}}</view>
						</picker>
					</view>
				</view>
				<!-- <view class="line-item acea-row row-middle" v-if="id === 1 || id === 2">
					<view class="left"><text class="redxx">*</text>保险排量</view>
					<view class="right input">
						<picker @change="changePl" :value="plindex" :range="plList" range-key="pail">
							<view class="text">{{plList[plindex].pail}}</view>
						</picker>
					</view>
				</view> -->
				<view class="line-item acea-row row-middle" v-if="id === 3">
					<view class="left"><text class="redxx">*</text>保险年限</view>
					<view class="right input">
						<picker @change="changeYear" :value="yindex" :range="yearList" range-key="nian">
							<view class="text">{{yearList[yindex].nian}}</view>
						</picker>
					</view>
				</view>
				<view class="line-item acea-row row-middle" v-if="id === 3">
					<view class="left"><text class="redxx">*</text>保险金额</view>
					<view class="right input">
						<picker @change="changePrice" :value="pindex" :range="priceList" range-key="jiage">
							<view class="text">{{priceList[pindex].jiage}}</view>
						</picker>
					</view>
				</view>
				<view class="line-item acea-row row-middle" v-if="id === 4 || id === 5">
					<view class="left"><text class="redxx">*</text>保险种类</view>
					<view class="right input">
						<picker @change="changeType" :value="tindex" :range="typeList" range-key="title">
							<view class="text">{{typeList[tindex].title}}</view>
						</picker>
					</view>
				</view>
				<view class="line-item acea-row row-middle" v-if="id !== 1">
					<view class="left"><text class="redxx">*</text>参考价格</view>
					<view class="right input">
						<text style="margin-left: 10rpx; color: rgba(255, 0, 0, 0.8);">{{seachData.jiage || 0}} 元</text>
					</view>
				</view>
				<view class="line-item acea-row row-middle">
					<view class="left"><text class="redxx">*</text>保险方案：</view>
					<view class="right"></view>
				</view>
				<view class="case-box" v-if="seachData && seachData !== null">
					<view class="pic-box" v-if="seachData.file && seachData.file !== ''">
						<image :src="adminUrl+seachData.file" @click="previewImage" mode="widthFix"></image>
					</view>
					<view class="content-box"  v-if="seachData.text && seachData.text !== ''" >
						<u-parse :html="seachData.text"></u-parse>
					</view>
				</view>
				<view class="no-case-box acea-row row-center row-column" v-else>
					<view class="iconfont icon-wuneirong"></view>
					<view class="text">暂无方案</view>
				</view>
			</view>
		</view>
		<view class="uni-p-b-98"></view>
		<view class="btn-box acea-row row-center uni-p-b-98">
			<view class="btn" @click="goTokefu">联系客服</view>
		</view>	
	</view>
</template>

<script>
	import {
		getGsType,//查询保险公司
		getPlType,//查询排量
		getDaoType,//盗抢险 年份 金额查询
		getDaoXq,//盗抢险险查询
		postDaoOrder,//盗抢险订单添加
		getYiXq,//十万个人意外险查询
		postYiOrder,//十万个人意外险订单添加
		getDianXq,//电瓶车查询
		postDianOrder,//电瓶车险订单添加
		postSyOrder,//商业险订单添加
		postSyXq,//商业险查询
		postJiaoXq,//交强险险查询
		postJiaoOrder,//交强险订单添加
		getJdGsType
	} from "@/api/news.js"
	import {getKfInfo} from "@/api/index.js"
	import {mapGetters} from "vuex";
	import { toLogin } from "@/libs/login";
	export default {
		computed: mapGetters(['isLogin','uid','token']),
		data() {
			return {
				adminUrl:this.$config.Http_admin_url,
				title:'',
				tips:'',
				id:0,
				kflink:'',
				gsList:null,
				gsindex:0,
				plList:null,
				plindex:0,
				yearList:null,
				yindex:0,
				priceList:null,
				pindex:0,
				typeList:null,
				tindex:0,
				daoList:null,
				daoXqList:null,
				yiSqList:null,
				syXqList:null,
				seachData:null,
			}
		},		
		onLoad(option) {
			uni.setNavigationBarTitle({
				title:''
			});
			if(!option.id){
				uni.showToast({
					title:'参数错误'
				})
			}else{
				if(!this.isLogin){
					toLogin()
				}else{
					this.id = Number(option.id)
					this.setTitle()
					this.getKfInfo()
					if(this.id !== 4 && this.id !== 5){
						this.getGsList()
					}
					if(this.id === 1 || this.id === 2){
						this.getPlList()
						this.plindex = Number(option.pl)
					}
					if(this.id === 3){
						this.getYearAndPrice()
					}
					if(this.id === 4){
						this.getYiCx()
					}
					if(this.id === 5){
						this.getDianCx()
					}
				}
			}
		},
		onShareAppMessage: function() {
			return {
				title: this.$config.shareTitle,
				imageUrl: this.adminUrl+'/upload/goulogo.png',
				desc: this.$config.shareTitle,
				path: `/pages/about/index?id=${this.id+1}&uid=${this.uid}`
			};
		},
		onShareTimeline: function() {
			return {
				title: this.shareTitle,
				imageUrl: this.adminUrl+'/upload/goulogo.png',
				desc: this.shareTitle,
				path: `/pages/about/index?id=${this.id+1}&uid=${this.uid}`
			};
		},
		methods:{
			previewImage(){
				let that=this
				// 预览图片
				uni.previewImage({
					urls: [that.adminUrl+that.seachData.file],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 获取客服链接
			getKfInfo(){
				getKfInfo(this.id).then(res=>{
					if(res.code == 900){
						this.kflink = res.data.link
					}
				})
			},
			// 联系客服
			goTokefu(){
				let that=this
				// console.log('kflink',that.kflink)
				that.saverOrder()
				// #ifdef MP-WEIXIN
				wx.openCustomerServiceChat({
					extInfo: {
						url: that.kflink,
					},
					corpId: that.$config.qywxId,
					success(res) {
						console.log('成功了',res)
						// that.saverOrder()
					},
					fail: function(err) {
					    // 打开客服会话失败的回调
					    console.error('打开客服会话失败', err);
					}
				})
				// #endif
			},
			// 保险公司
			getGsList(){
				if(this.id === 2 || this.id === 3){
					getJdGsType().then(res=>{
						if(res.code == 900){
							this.gsList = res.data
							this.gsList.unshift({name:'请选择保险公司'})
						}
					})
				}else{
					getGsType().then(res=>{
						if(res.code == 900){
							this.gsList = res.data
							this.gsList.unshift({name:'请选择保险公司'})
						}
					})
				}
			},
			// 选择公司
			changeGs(e){
				this.gsindex = Number(e.detail.value)
				this.searchPrice()
			},
			// 排量
			getPlList(){
				getPlType().then(res=>{
					if(res.code == 900){
						this.plList = res.data
						this.plList.unshift({pail:'请选择保险排量'})
					}
				})
			},
			// 选择排量
			changePl(e){
				this.plindex = Number(e.detail.value)
				this.searchPrice()
			},
			// 年限，价格
			getYearAndPrice(){
				getDaoType().then(res=>{
					if(res.code == 900){
						this.yearList = res.data.nian
						this.yearList.unshift({nian:'请选择年限'})
						
						this.priceList = res.data.jiage
						this.priceList.unshift({jiage:'请选择保险金额'})
					}
				})
			},
			// 选择年限
			changeYear(e){
				this.yindex = Number(e.detail.value)
				this.searchPrice()
			},
			// 选择年限
			changePrice(e){
				this.pindex = Number(e.detail.value)
				this.searchPrice()
			},
			
			// 查询保险内容
			searchPrice(){
				console.log('id',this.id)
				switch (this.id){
					case 1:
						this.getSyCx()
					break;
					case 2:
						this.getJiaoCx()
					break;
					case 3:
						this.getDaoCx()
					break;
					case 4:
						this.getYiCx()
					break;
					case 5:
						this.getDianCx()
					break;
					default:
					break;
				}
			},
			// 设置title
			setTitle(){
				let title=''
				switch (this.id){
					case 1:
						title='商业险'
						this.tips = '提示：选择保险公司，选择排量可查看保险方案'
					break;
					case 2:
						title='交强险'
						this.tips = '提示：选择保险公司，选择排量可查看保险方案价格。价格仅供参考实际价格联系客服。'
					break;
					case 3:
						title='盗抢险'
						this.tips = '提示：选择保险公司，选择年限，选择保险金额可查看保险方案价格。价格仅供参考实际价格联系客服。'
					break;
					case 4:
						title='十万个人意外险'
						this.tips = '提示：选择保险种类，查看保险方案价格。价格仅供参考实际价格联系客服。'
					break;
					case 5:
						title='电瓶车商业险'
						this.tips = '提示：选择保险种类，查看保险方案价格。价格仅供参考实际价格联系客服。'
					break;
					default:
					break;
				}
				this.title = title
			},
			// 提交订单
			saverOrder(){
				let title=''
				switch (this.id){
					case 1:
						this.saverSyOrder()
					break;
					case 2:
						this.saverJiaoOrder()
					break;
					case 3:
						this.saverDaoOrder()
					break;
					case 4:
						this.saverYiOrder()
					break;
					case 5:
						this.saverDianOrder()
					break;
					default:
					break;
				}
			},
			
			// 商业险查询
			getSyCx(){
				if(this.gsindex ==0){
					return this.$base.Tips({
						title:'请选择保险公司'
					})
				}
				if(this.plindex ==0){
					return this.$base.Tips({
						title:'请选择保险排量'
					})
				}
				
				let param = {
					name_id: this.gsList[this.gsindex].id,
					pail_id: this.plList[this.plindex].id
				}
				postSyXq(param).then(res=>{
					if(res.code == 900 && res.data !== null){
						this.seachData = res.data
						this.seachData.file = this.seachData.file.replace(/\\/g,"/")
					}else{
						this.seachData = null
					}
				})
			},
			// 商业险订单提交
			saverSyOrder(){
				if(this.token == ''){
					toLogin()
				}
				if(this.gsindex ==0){
					return this.$base.Tips({
						title:'请选择保险公司'
					})
				}
				if(this.plindex ==0){
					return this.$base.Tips({
						title:'请选择保险排量'
					})
				}
				
				let param = {
					name_id: this.gsList[this.gsindex].id,
					pail_id: this.plList[this.plindex].id,
					token: this.token
				}
				postSyOrder(param).then(res=>{
				})
			},
			// 交强险查询
			getJiaoCx(){
				if(this.gsindex ==0){
					return this.$base.Tips({
						title:'请选择保险公司'
					})
				}
				if(this.plindex ==0){
					return this.$base.Tips({
						title:'请选择保险排量'
					})
				}
				let param = {
					name_id: this.gsList[this.gsindex].id,
					pail_id: this.plList[this.plindex].id
				}
				postJiaoXq(param).then(res=>{
					if(res.code == 900 && res.data !== null){
						this.seachData = res.data
						this.seachData.file = this.seachData.file.replace(/\\/g,"/")
					}else{
						this.seachData = null
					}
				})
			},
			// 交强险订单提交
			saverJiaoOrder(){
				if(this.token == ''){
					toLogin()
				}
				
				if(this.gsindex ==0){
					return this.$base.Tips({
						title:'请选择保险公司'
					})
				}
				if(this.plindex ==0){
					return this.$base.Tips({
						title:'请选择保险排量'
					})
				}
				if(!this.seachData.jiage){
					return this.$base.Tips({
						title:'没有生成参考价格'
					})
				}				
				let param = {
					name_id: this.gsList[this.gsindex].id,
					pail_id: this.plList[this.plindex].id,
					token: this.token,
					can_jine: this.seachData.jiage
				}
				postJiaoOrder(param).then(res=>{
				})
			},		
			// 盗抢险查询
			getDaoCx(){
				if(this.gsindex ==0){
					return this.$base.Tips({
						title:'请选择保险公司'
					})
				}
				if(this.yindex ==0){
					return this.$base.Tips({
						title:'请选择保险年限'
					})
				}
				if(this.pindex ==0){
					return this.$base.Tips({
						title:'请选择保险金额'
					})
				}
				let param = {
					name_id: this.gsList[this.gsindex].id,
					nian: this.yearList[this.yindex].nian,
					bx_jine:this.priceList[this.pindex].jiage
				}
				getDaoXq(param).then(res=>{
					if(res.code == 900 && res.data !== null){
						this.seachData = res.data
						this.seachData.file = this.seachData.file.replace(/\\/g,"/")
					}else{
						this.seachData = null
					}
				})
			},
			// 盗抢险订单提交
			saverDaoOrder(){
				if(this.token == ''){
					toLogin()
				}
				if(this.gsindex ==0){
					return this.$base.Tips({
						title:'请选择保险公司'
					})
				}
				if(this.yindex ==0){
					return this.$base.Tips({
						title:'请选择保险年限'
					})
				}
				if(this.pindex ==0){
					return this.$base.Tips({
						title:'请选择保险金额'
					})
				}
				if(!this.seachData.jiage){
					return this.$base.Tips({
						title:'没有生成参考价格'
					})
				}				
				
				let param = {
					name_id: this.gsList[this.gsindex].id,
					nian: this.yearList[this.yindex].nian,
					bx_jine: this.priceList[this.pindex].jiage,
					token: this.token,
					can_jine: this.seachData.jiage
				}
				postDaoOrder(param).then(res=>{
				})
			},
			
			// 意外险查询
			getYiCx(){
				getYiXq().then(res=>{
					if(res.code == 900 && res.data !== null){
						this.typeList = res.data
						this.typeList.unshift({title:'请选择保险种类'})
						this.seachData = this.typeList[this.tindex]
						// this.seachData.file = this.seachData.file.replace(/\\/g,"/")
					}else{
						this.typeList = [{title:'请选择保险种类'}]
						this.seachData = null
					}
				})
			},
			// 意外险订单提交
			saverYiOrder(){
				if(this.token == ''){
					toLogin()
				}
				if(!this.seachData.jiage){
					return this.$base.Tips({
						title:'没有生成参考价格'
					})
				}				
								
				if(this.tindex == 0){
					return this.$base.Tips({
						title:'请选择保险种类'
					})
				}
				
				
				let param = {
					sh_id: this.typeList[this.tindex].id,
					jiage: this.typeList[this.tindex].jiage,
					token: this.token,
					can_jine: this.seachData.jiage
				}
				postYiOrder(param).then(res=>{
				})
			},
			// 电瓶车险查询
			getDianCx(){
				getDianXq().then(res=>{
					if(res.code == 900 && res.data !== null){
						this.typeList = res.data
						this.typeList.unshift({title:'请选择保险种类'})
						this.seachData = this.typeList[this.tindex]
						// this.seachData.file = this.seachData.file.replace(/\\/g,"/")
					}else{
						this.typeList = [{title:'请选择保险种类'}]
						this.seachData = null
					}
				})
			},
			// 电瓶车险订单提交
			saverDianOrder(){
				if(this.token == ''){
					toLogin()
				}
				if(!this.seachData.jiage){
					return this.$base.Tips({
						title:'没有生成参考价格'
					})
				}				
				
				if(this.tindex == 0){
					return this.$base.Tips({
						title:'请选择保险种类'
					})
				}
				let param = {
					sh_id: this.typeList[this.tindex].id,
					token: this.token,
					can_jine: this.seachData.jiage
				}
				postDianOrder(param).then(res=>{
				})
			},
			changeType(e){
				this.tindex = e.detail.value
				this.seachData = this.typeList[this.tindex]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-content{
		.title{
			width: 100%;
			text-align: center;
			padding: 20rpx 0;
			background-color: #FF370A;
			border-radius: 15rpx;
			margin: 20rpx 0;
			.txt{
				font-size: 60rpx;
				font-weight: 500;
				letter-spacing: 0rpx;
				color:#ffffff;
				text-shadow: 0rpx 2rpx 4rpx  rgba(0, 0, 0, 0.25);
			}
		}
		.tips{
			min-height: 80rpx;
			padding: 0 18rpx;
		}
		.form-box{
			margin-top: 30rpx;
			.line-item{
				padding: 20rpx 18rpx;
				border-top: 1px solid rgba(230, 230, 230, 0.5);
				.left{
					width: 30%;
				}
				.right{
					width: 60%;
				}
				.input{
					height: 60rpx;
					line-height: 60rpx;
					padding-left: 10rpx;
					// border: #cccccc 2rpx solid;
					// border-radius: 10rpx;
				}
			}
		}
		.pic-box{
			text-align: center;
			image{
				width: 100%;
			}
		}
		.no-case-box{
			padding-top: 80rpx;
			.iconfont{
				font-size: 160rpx;
				text-align: center;
			}
			.text{
				margin-top: 20rpx;
				text-align: center;
			}
		}
	}
	.redxx{
		color: rgba(245, 0, 0, 0.8);
		padding-right: 4rpx;
	}
	.btn-box{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			padding: 20rpx;
			background-color: #f2f5f7;
			.btn{
				width: 100%;
				height: 80rpx;
				padding: 20rpx 0;
				background-color: #C31026;
				color: #ffffff;
				text-align: center;
				border-radius: 40rpx;
			}
		}
	
</style>